<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

    /* background 缩写
    
    格式::
    background: color url('./1.jpg') 20px 30px/50px no-repeat local/scrool/fixed;
    
    */
    /* 
    background-image用于设置元素的背景图片
    口会盖在(不是覆盖)background-color的上面
    
    如果设置了多张图片
    口 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
    
    注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 */


    /* background-size用于设置背景图片的大小
    auto: 默认值以背景图本身大小显示
    cover:缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
    contain:缩放背景图宽度或者高度铺满元素，但是图片保持宽高比
    percentage>:百分比，相对于背景区 (background positioning area)
    口length:具体的大小，比如100px */
    .box{
        width: 600px;
        height: 600px;
        background-color: rgb(217, 255, 0);
        background-image: url("https://image7.cdn.seaart.ai/static/7dee721b12bbaadc82d228adff5eeb03/20230526/7ae60e836185c359d4ca45bbd448e8f3.jpeg"),url("https://image4.cdn.seaart.ai/static/116f7fad0fcd533f862692fddb0f0d3a/20230306/de3fe5286d7a66b83cf00933ac692fd1_low.webp");
        background-repeat: no-repeat;
        background-size: cover;

    }
    .box2{
        width: 600px;
        height: 600px;
        background-image: url(./imgs/24gf-bricks.svg);
        background-repeat: repeat;
    }
    .box3{
        width: 600px;
        height: 600px;
          background-image: url("https://image4.cdn.seaart.ai/static/116f7fad0fcd533f862692fddb0f0d3a/20230306/de3fe5286d7a66b83cf00933ac692fd1_low.webp");
        background-repeat: no-repeat;
/* background-position用于设置背景图片在水平、垂直方向上的具体位置口可以设置具体的数值 比如 20px 30px;
口水平方向还可以设值: left、 center、 right
口 垂直方向还可以设值: top、center、bottom
口 如果只设置了1个方向，另一个方向默认是center */
          /* background-position: 100px 100px; */
          /* 右下角 */
          background-position: right bottom;
          /* 顶部  center */
          /* background-position: top; */
    }
    /* .box4{
        width: 100%;
        height: 1080px;
        background-image: url("https://img2.baidu.com/it/u=3319309255,3831699272&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500");
        background-repeat: no-repeat;
        background-position: center;
    } */
    /* background-attachment 背景图片滚动*/
    .box5{
        height: 200px;
        width: 300px;
        overflow: scroll;
        background-color: #f00;
        background-image: url("../css/imgs/bird.png");
        /* 附加效果 */
        background-attachment: scroll;
        /* background-attachment: local; */
        /* background-attachment: fixed; */
    }

    /* 总结
口img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
口 background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息 */
</style>
<body>
    <!-- <div class="box">
    </div>

    <div class="box2">
    </div>

    <div class="box3">
    </div> -->
    <!-- <div class="box4">
    </div> -->
    <div class="box5">
        央视网消息（新闻联播）：推进中国式现代化，必须全面推进乡村振兴。习近平总书记指出，产业振兴是乡村振兴的重中之重，也是实际工作的切入点。近日，记者走进乡村一线，看到各地以特色产业为抓手，拓展产业链发展产业集群，一二三产业融合发展，培育乡村振兴新动能。

        这个端午，广东茂名高州市根子镇柏桥村的荔枝迎来了丰收。今年4月，习近平总书记来到柏桥村考察调研。总书记走进荔枝种植园，了解当地发展特色种植产业和文旅产业等情况，并同现场技术人员亲切交流。
    </div>
</body>
</html>